<template>
	<view class="search-example">
		<view class="example-section">
			<text class="section-title">基础搜索</text>
			<JSearch 
				v-model="basicSearch"
				placeholder="请输入搜索内容"
				@search="handleBasicSearch"
			/>
		</view>
		
		<view class="example-section">
			<text class="section-title">带搜索建议</text>
			<JSearch 
				v-model="suggestionSearch"
				placeholder="搜索商品"
				:suggestions="suggestions"
				:show-suggestions="true"
				@search="handleSuggestionSearch"
				@suggestion-click="handleSuggestionClick"
			/>
		</view>
		
		<view class="example-section">
			<text class="section-title">带搜索历史</text>
			<JSearch 
				v-model="historySearch"
				placeholder="搜索历史"
				:show-history="true"
				:history-key="'example_search_history'"
				:max-history-count="5"
				@search="handleHistorySearch"
				@history-click="handleHistoryClick"
			/>
		</view>
		
		<view class="example-section">
			<text class="section-title">自定义样式</text>
			<JSearch 
				v-model="customSearch"
				placeholder="自定义样式搜索"
				:shape="'square'"
				:bg-color="'#f8f9fa'"
				:border-color="'#dee2e6'"
				:height="50"
				:search-icon-color="'#007bff'"
				:action-text="'查找'"
				@search="handleCustomSearch"
			/>
		</view>
		
		<view class="example-section">
			<text class="section-title">完整功能</text>
			<JSearch 
				v-model="fullSearch"
				placeholder="完整功能搜索"
				:suggestions="suggestions"
				:show-suggestions="true"
				:show-history="true"
				:history-key="'full_search_history'"
				:max-history-count="8"
				:shape="'round'"
				:bg-color="'#ffffff'"
				:border-color="'#e1e5e9'"
				:height="45"
				:search-icon-color="'#28a745'"
				:action-text="'搜索'"
				@search="handleFullSearch"
				@suggestion-click="handleSuggestionClick"
				@history-click="handleHistoryClick"
			/>
		</view>
		
		<!-- 搜索结果展示 -->
		<view class="search-results" v-if="searchResults.length > 0">
			<text class="results-title">搜索结果：</text>
			<view class="result-item" v-for="(result, index) in searchResults" :key="index">
				<text class="result-text">{{ result }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import JSearch from './JSearch.vue'

export default {
	name: 'SearchExample',
	components: {
		JSearch
	},
	data() {
		return {
			basicSearch: '',
			suggestionSearch: '',
			historySearch: '',
			customSearch: '',
			fullSearch: '',
			suggestions: [
				'苹果',
				'香蕉',
				'橙子',
				'葡萄',
				'草莓',
				'蓝莓',
				'樱桃',
				'桃子'
			],
			searchResults: []
		}
	},
	methods: {
		handleBasicSearch(value) {
			console.log('基础搜索:', value)
			this.showResults(`基础搜索: ${value}`)
		},
		
		handleSuggestionSearch(value) {
			console.log('建议搜索:', value)
			this.showResults(`建议搜索: ${value}`)
		},
		
		handleHistorySearch(value) {
			console.log('历史搜索:', value)
			this.showResults(`历史搜索: ${value}`)
		},
		
		handleCustomSearch(value) {
			console.log('自定义搜索:', value)
			this.showResults(`自定义搜索: ${value}`)
		},
		
		handleFullSearch(value) {
			console.log('完整搜索:', value)
			this.showResults(`完整搜索: ${value}`)
		},
		
		handleSuggestionClick(item) {
			console.log('选择建议:', item)
			this.showResults(`选择建议: ${item}`)
		},
		
		handleHistoryClick(item) {
			console.log('选择历史:', item)
			this.showResults(`选择历史: ${item}`)
		},
		
		showResults(result) {
			this.searchResults.unshift(result)
			if (this.searchResults.length > 5) {
				this.searchResults = this.searchResults.slice(0, 5)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.search-example {
	padding: 20rpx;
	
	.example-section {
		margin-bottom: 40rpx;
		
		.section-title {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
	}
	
	.search-results {
		margin-top: 40rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 8rpx;
		
		.results-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.result-item {
			padding: 10rpx 0;
			border-bottom: 1rpx solid #e9ecef;
			
			&:last-child {
				border-bottom: none;
			}
			
			.result-text {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
}
</style>














